<template>
    <dzs-dialog title="权限分配"  :isShow="isShow" @close="onCancel" @open="onOpen">
        <div class="title-box">
            <div class="title-box-left">角色名称：{{props.dialogData.name}}</div>
        </div>
        <dzs-table :list="permissionList" :tableHeader="tableHeader" :border="true" :showSider="false"
            :showOperation="false" height="500px">
            <template #permission="{ row }">
                <el-checkbox-group v-model="tableEdit[row.value]">
                    <el-checkbox v-for="(option, idx) in row.actions" :key="idx" :label="option.label"
                        :value="option.value"></el-checkbox>
                </el-checkbox-group>
            </template>
        </dzs-table>
        <template #footer>
            <dzs-button @click="onCancel">取消</dzs-button>
            <dzs-button type="primary" @click="onSubmit">提交</dzs-button>
        </template>
    </dzs-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import type { tableItem, permissionListItem } from "../@types";
import type { PropType } from "vue";
import { ElNotification } from 'element-plus';
import { getPermissionListByRoleId , updatePermissionListByRoleId} from "../api/api";
import type { CommonResponse } from "@/@types";
import type { TableHeader } from "@/components/dzs-table/@types"

const emit = defineEmits(['cancel', 'update:isShow'])

const props = defineProps({
    dialogData: {
        type: Object as PropType<tableItem>,
        default: () => ({})
    },
    isShow: {
        type: Boolean,
        default: false
    }
})
const permissionList = ref<permissionListItem[]>([])
const tableHeader = ref<TableHeader[]>([
    {
        label: "菜单名称",
        key: "label",
        width: "300px"
    },
    {
        label: "权限分配",
        key: "permission",
        isSlot: true
    }
])

const tableEdit = ref<Record<string, any>>({})

const onOpen = () => {
    getPermissionList()
}


/**获取权限列表*/
const getPermissionList = async () => {
    getPermissionListByRoleId({ ID: props.dialogData.ID }).then(res => {
        const result = res as CommonResponse<permissionListItem[]>;
        let data = result.data.data || [];
        data.forEach(item => {
            tableEdit.value[item.value] = item.roles
        });
        permissionList.value = data
    })
}

const onCancel = () => {
    emit('cancel');
    emit('update:isShow', false);
}

const onSubmit = () => {
    let pages = [];
    for (const key in tableEdit.value) {
        if (tableEdit.value[key].length > 0) {
            pages.push({
                pageID : key,
                actions : tableEdit.value[key]
            })
        }
    }
    updatePermissionListByRoleId({
        rolesID : props.dialogData.ID ,
        pages : pages
    }).then(res => {
        const result = res as CommonResponse<any>
        if (result.code === 200) {
            ElNotification({
                title: '成功',
                message: "提交成功",
                type: 'success',
                duration : 1000
            })
            onCancel()
        }
    })
}

</script>
<style lang="scss" scoped>
.title-box{
    display: flex;
    padding: 10px 0;
    font-size: 16px;
}
</style>